<template>
  <view class="page-search-user">
    <u-navbar back-text="添加朋友">
    </u-navbar>
    <uni-search-bar @confirm="search" @input="input" ></uni-search-bar>
    
    <view v-show="isSearchTipShow" class="wrap" @click="search">
      <text class="iconfont icontianjiapengyoutubiao"></text>
      <text>搜索:</text>
      <text class="key">{{value}}</text>
    </view>
    
    <view v-show="isNone" class="none-tip">
      用户不存在
    </view>
  </view>
</template>

<script>
  import { mapState } from 'vuex';
  export default {
    data () {
      return {
        value: '',
        isNone: false,
        isSearchTipShow: false
      }
    },
    computed: {
      ...mapState({
        friendList: (state) => state.app.friendList
      })
    },
    methods: {
      input (obj) {
        this.value = obj.value;
        this.isNone = false;
        if (this.value === '') {
          this.isSearchTipShow = false;
        } else {
          this.isSearchTipShow = true;
        }
      },
      search () {
        window.nim.getUser({
          account: this.value,
          done: (error, user) => {
			  console.log(user)
            if (user) {
              this.$store.commit('app/setCurrUserCard', {
                ...user
              })
              
              uni.navigateTo({
                url: '/pages/index/userCard?'
              })
            } else {
              this.isNone = true;
              this.isSearchTipShow = false;
            }
          }
        });
      }
    }
  }
</script>

<style scoped lang="scss">
  .page-search-user {
    .wrap {
      display: flex;
      padding: 0 20rpx;
      align-items: center;
      // background: rgb(248, 248, 248);
    }
    .icontianjiapengyoutubiao {
      font-size: 80rpx;
      color: #18B566;
      margin-right: 20rpx;
    }
    .key {
      color: #18B566;
    }
    .none-tip {
      text-align: center;
    }
  }
</style>
